// 权限控制
// 应用启动的时候 权限控制就立刻生效
// main.js  初始化的事情  立刻执行一下permission.js

// 模块化  export import  直接导入js  会被立刻执行

// console.log('权限执行了')
import router from '@/router'
import store from '@/store'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css' // 配套的进度条样式
import { getToken } from './utils/auth'
// 引入动态路由
import { asyncRoutes } from './router/asyncRoutes'
// 创建白名单
const WHITELIST = ['/login', '/404']
// 路由前置守卫
router.beforeEach(async(to, from, next) => {
  // 在这里开启进度条展示
  NProgress.start()
  // to: 跳转到的目标路由对象
  // from: 来源路由对象
  // next: 放行函数 可执行的函数
  const token = getToken()
  if (token) {
    // 有token
    // 是否去登录页？
    if (to.path === '/login') {
      next('/')
    } else {
      // 这里！！！ 最合适！！ 触发action函数
      next()
      // 重复请求接口 优化判断
      // 通过用户id做判断
      if (!store.state.user.userInfo.userId) {
        const res = await store.dispatch('user/fetchUserInfo')
        // 权限控制
        // 总结:
        // 在登陆跳转时,获取用户的权限数据,系统的动态路由不在初始化导入,而是通过筛选找到符合条件的路由,通过addRouter 动态分配给应有的权限动态路由
        // 1. 拿到当前用户 menus 权限数据  以及   所有的动态路由表
        const menus = res.roles.menus
        console.log(menus, asyncRoutes)
        // 2. 以 menus 为主对 asyncRouter 做过滤[filter] 找到符合的条件项  router  的name 属性
        const filterMenus = asyncRoutes.filter((route) => menus.includes(route.children[0].name))
        console.log(filterMenus)
        // 3. 动态添加路由    把筛选后有资格的路由添加到 路由系统   让访问path 的时候渲染组件
        router.addRoutes(filterMenus)
        // 4. 调用 store 方法把过滤后的动态路由表加入
        store.commit('menu/setMenuList', filterMenus)
        // 5. 使用vuex 的动态响应式数据 渲染左侧菜单栏
      }
    }
  } else {
    // 没有token
    // 白名单：当前的路由不需要加控制 直接放行就行
    // 如何判断字符串是否在数组中找的到？
    if (WHITELIST.includes(to.path)) {
      next()
    } else {
      next('/login')
    }
  }
  // 这里关闭进度条展示
  NProgress.done()
})

